<template>
  <div class='plane-card-box width-100 border-box'>
    <div class="card-head border-box width-100">
      <span class="title">
        <slot name="title">
          {{ title }}
        </slot>
      </span>
    </div>
    <div class="card-content border-box width-100 flex-acenter">
      <slot name="content"></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: 'Page'
    },
  },
  data () {
    return {

    };
  },
  computed: {},
  watch: {},
  methods: {

  },
  created () {

  },
  mounted () {

  },
  components: {},
}
</script>

<style lang='less' scoped>
.plane-card-box {
  border: 1px solid @primary;
  width: 100%;
  background: linear-gradient(90deg, #0f3150 0%, rgba(15, 49, 80, 0) 100%);
  .title {
    padding: 5px;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 14px;
    color: #ffffff;
  }
}
.card-content {
  // background: linear-gradient(180deg, #103253 0%, rgba(7, 34, 60, 0.1) 100%);
  background: #103253;
  padding: 5px;
}
</style>